<template>
	<view class="no-map">
		<up-image
			width="100%"
			mode="widthFix"
			:src="
				`/static/image/index/` +
				getDeviceImg(deviceInfo?.model_id) +
				`.png`
			"></up-image>
		<up-form labelPosition="left" :model="deviceInfo" ref="formRef">
			<up-form-item
				v-for="(item, index) in uniShowList"
				:label="item?.name"
				:key="index">
				{{ item?.value || "" }}
			</up-form-item>
		</up-form>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getDeviceImg } from "@/utils/deviceUtils";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const formRef = ref(null);
const props = defineProps<{
	deviceInfo: Device;
	uniShowList: UniShowItem;
}>();
watch(
	() => [props.deviceInfo, props.uniShowList],
	() => {},
	{ deep: true }
);
</script>

<style lang="scss" scoped>
.no-map {
	margin: 4%;
	img {
		width: 100%;
		height: auto;
	}
	:deep(.u-form-item) {
		margin-top: 15px;
		padding: 10px 15px;
		border-bottom: 1px solid #f5f5f5;
	}
	:deep(.u-form-item__body) {
		padding: 0;
	}
	:deep(.u-form-item__body__left) {
		width: 30% !important;
	}
	:deep(.u-form-item__body__left__content__label) {
		font-size: 16px;
		color: rgba(0, 0, 0, 0.7);
		font-weight: bold;
	}
	:deep(.u-form-item__body__right__content__slot) {
		font-size: 16px;
		color: rgba(0, 0, 0, 0.6);
	}
}
</style>
